<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="24" :order="1" class="tool-action">
                    <a-cascader v-model="params.goodsType" expandTrigger="hover"
                                :options="typeList" :fieldNames="{label: 'name', value: 'id', children: 'children'}"
                                placeholder="商品分类" style="width: 300px;margin-left:5px" />
                    <a-input-search placeholder="商品名称/编码" v-model="params.name" @search="onSearch" style="width:300px;">
                        <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
                    </a-input-search>
                </a-col>
            </a-row>
            <a-table bordered :columns="columns" :dataSource="dataList" :rowSelection="{selectedRowKeys: selection, onChange: onChange,type:checkedType}"  :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle" style="border-left: 1px solid #e8e8e8">
                <template slot="name" slot-scope="text,record,index">
                    <div class="goods clearfix">
                        <div>
                            <img v-if="record.mainImage && record.mainImage!='' " :src="record.mainImage" />
                            <img v-else src="../../assets/images/nogoods.png" />
                        </div>
                        <div class="info">
                            <p>{{record.name}}</p>
                        </div>
                    </div>
                </template>
                <template slot="price" slot-scope="text,record">
                    {{fmMoney(record.minPrice,2,true)}}{{record.specSize>1?' - '+fmMoney(record.maxPrice,2):''}}
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a-button type="default" @click="onSelect(record)">选择</a-button>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action">
                </a-col>
                <a-col :span="12" :order="2" class="tool-pagination">
                    <a-pagination v-if="total>params.pageSize" :total="total"  @change="onPageChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
            <a-row class="foot-btns" v-if="checkedType === 'checkbox'">
                <a-button @click="onCancel"> 取 消 </a-button>
                <a-button type="primary" @click="onSubmit" :loading="isLoading"> 保 存 </a-button>
            </a-row>
        </div>
    </div>
</template>

<script>
    import {findList as findGoodsList} from "../../api/goods";
    import {findTreeList as findTypeList} from "../../api/goodsType";
    import {fmMoney} from "../../utils";

    const columns=[
        {title:'商品名称',dataIndex:'name',align:'left',scopedSlots: { customRender: 'name' }},
        {title:'分类',dataIndex:'typeName',align:'center'},
        {title:'单价',dataIndex:'price',align:'right',scopedSlots: { customRender: 'price' }},
        {title: '选择',dataIndex: 'operation',align:'center',width: 100,scopedSlots: { customRender: 'operation' }}
    ]
    export default {
        props:{
            selectedKey:{
                type:Number,
                default: 0
            },
            checkedType:{
                type:String,
                default:'radio'
            },
            category:Object
        },
        data(){
            return{
                columns,
                params:{
                    name:'',
                    goodsType:[],
                    goodsTypeId:undefined,
                    pageSize:10,
                    current:1,
                },
                total:0,
                dataList:[],
                selection:[],
                loading:false,
                isLoading:false,
                typeList:[]  // 商品分类列表
            }
        },
        methods:{
            fmMoney,
            onSearch(){
                this.params.current = 1;
                this.onLoad();
            },
            onPageChange(current){
                this.params.current = current;
                this.onLoad();
            },
            onCancel(){
                this.$emit("result",null);
            },
            onSubmit(){
                this.loading = true;
                if(this.selection.length === 0){
                    this.loading = false;
                    this.$message.alert("请选择一件商品");
                    return;
                }
                let result = []
                this.selection.forEach(m =>{
                    result.push(this.dataList.find(g=>g.id===m))
                })
                this.$emit("result", result);
                this.loading = false;
            },
            onChange(selectedRowKeys, selectedRows){
                if(this.checkedType === 'radio') {
                    this.$emit('result', selectedRows[0])
                }else{
                    this.selection = selectedRows.map(m=>m.id)
                }
            },
            async onSelect(record){
                let result = record
                if(this.checkedType === 'checkbox') {
                    result = [record]
                }
                this.$emit('result',result)
            },
            //得到分类
            async onLoadTypeList(){
                let resp = await findTypeList();
                if(this.qUtil.validResp(resp)){
                    let list = resp.data.dataList || [];
                    if(list.length>0){
                        list.map(m=>{
                            if(m.children != null && m.children.length>0){
                                m.children.map(c=>{
                                    c.children = []
                                    delete c.children
                                })
                            }else{
                                m.children = []
                                delete m.children
                            }
                        })
                    }
                    this.typeList = list
                }
            },
            async onLoad(){
                this.loading = true;
                let params = {...this.params,goodsTypeId:undefined}
                if(params.goodsType.length>0){
                    params.goodsTypeId = params.goodsType[params.goodsType.length-1]
                }
                let dataList = [],total = 0
                let resp = await findGoodsList(params);
                if(this.qUtil.validResp(resp)){
                    dataList = resp.data.dataList || []
                    total = resp.data.total || 0
                }
                this.loading = false;
                this.dataList = dataList;
                this.total = total;
            },
        },
        async mounted(){
            if(this.category != null && this.category!= undefined){
                let type = []
                if(this.category.parentId>0){
                    type.push(this.category.parentId)
                }
                type.push(this.category.id)
                this.params.goodsType = type
                this.params.goodsTypeId = this.category.id
            }
            if(this.selectedKey != null && this.selectedKey > 0){
                this.selection = [this.selectedKey]
            }
            await this.onLoadTypeList();
            this.onLoad();
        }
    }
</script>

<style scoped>
    .foot-btns{
        margin-top:30px;
        text-align: center;
    }
    .goods{
        text-align: left;
    }
    .goods div{
        float:left;
    }
    .goods img{
        width:50px;
        height:50px;
    }
    .goods .info{
        margin-left:10px;
        text-align: left;
        line-height: 1.8;
    }
</style>